<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="Docusaurus v2.0.0-alpha.53">
<link rel="preconnect" href="https://www.google-analytics.com">
<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","UA-41480445-1","auto"),ga("set","anonymizeIp",!0),ga("send","pageview")</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>

<title data-react-helmet="true">Customize - Pure</title>

<meta data-react-helmet="true" charset="utf-8"><meta data-react-helmet="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-react-helmet="true" property="og:title" content="Customize - Pure"><meta data-react-helmet="true" name="description" content="Choose the modules that you need."><meta data-react-helmet="true" property="og:description" content="Choose the modules that you need."><meta data-react-helmet="true" name="twitter:card" content="summary_large_image">

<link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:200">


<link rel="stylesheet" href="/styles.e0d41c52.css">


<link rel="preload" href="/styles.59801a08.js" as="script">

<link rel="preload" href="/runtime~main.5e4f6629.js" as="script">

<link rel="preload" href="/main.596eb772.js" as="script">

<link rel="preload" href="/common.71de0887.js" as="script">

<link rel="preload" href="/94a49780.3c2eb2d8.js" as="script">

</head>
<body>

<div id="__docusaurus">
<div id="layout"><a href="#menu" id="menuLink" class="menu-link"><span></span></a><div id="menu"><div class="pure-menu"><a class="pure-menu-heading" href="/">Pure</a><ul class="pure-menu-list"><li class="pure-menu-item"><a class="pure-menu-link" href="/start/">Get Started</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/layouts/">Layouts</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/base/">Base</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/grids/">Grids</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/forms/">Forms</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/buttons/">Buttons</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/tables/">Tables</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/menus/">Menus</a></li><li class="pure-menu-item menu-item-divided"><a class="pure-menu-link" href="/tools/">Tools</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/customize/">Customize</a></li><li class="pure-menu-item"><a class="pure-menu-link" href="/extend/">Extend</a></li><li class="pure-menu-item"><a href="https://github.com/pure-css/pure/releases/" class="pure-menu-link">Releases</a></li></ul></div></div><div id="main" class="customize"><div class="header"><h1>Customize</h1><h2>Choose the modules that you need.</h2></div><div class="content"><h2 id="rollups" class="content-subhead">Rollups<a href="#rollups" class="content-link" title="Heading anchor"></a></h2><p>Rollups consist of all the modules in Pure. There are two rollups available - a regular (responsive) one, and a non-responsive one. Choose that one that&#x27;s right for your project.</p><div class="table-responsive"><table class="pure-table pure-table-bordered"><thead><tr><th>Name</th><th>URL</th><th>Size (gzip)</th></tr></thead><tbody><tr><td>Responsive Rollup</td><td>https://unpkg.com/purecss@2.0.5/build/pure-min.css</td><td>3.7KB</td></tr><tr><td>Non-Responsive Rollup</td><td>https://unpkg.com/purecss@2.0.5/build/pure-nr-min.css</td><td>3.5KB</td></tr></tbody></table></div><aside><p>You will need to include the grid stylesheets separately as they are not included in the rollup. The non-responsive rollup does not include media queries, thus making it easier for you to override styles in the base library. Additionally, you can also create a <a href="/grids/#pure-responsive-grids">custom grid</a> that better suits your projects needs.</p></aside><h3>Alternate CDNs</h3><p>The main host for Pure is the unpkg CDN where Pure is available over HTTPS. The following table lists alternate CDNs where Pure is hosted.</p><div class="table-responsive"><table class="pure-table pure-table-bordered"><thead><tr><th>CDN</th><th>URL</th><th>HTTPS</th><th>Combo</th></tr></thead><tbody><tr><td><a href="http://cdnjs.com/">cdnjs</a></td><td>//cdnjs.cloudflare.com/ajax/libs/pure/2.0.5/build/pure-min.css</td><td>Yes</td><td>Yes</td></tr><tr><td><a href="https://www.keycdn.com/">KeyCDN</a></td><td>//opensource.keycdn.com/pure/2.0.5/pure-min.css</td><td>Yes</td><td>No</td></tr><tr><td><a href="http://www.osscdn.com/">OSS MaxCDN</a></td><td>//oss.maxcdn.com/libs/pure/2.0.5/pure-min.css</td><td>Yes</td><td>No</td></tr><tr><td><a href="http://rawgit.com/">RawGit</a></td><td>//cdn.rawgit.com/pure-css/pure-release/v2.0.5/pure-min.css</td><td>Yes</td><td>No</td></tr><tr><td><a href="http://www.staticfile.org/">Staticfile</a></td><td>//cdn.staticfile.org/pure/2.0.5/pure-min.css</td><td>Yes</td><td>No</td></tr></tbody></table></div><p><b>Note:</b> If the latest version of Pure is not yet on one of the alternate CDNs, please contact them to update to the latest version of Pure: <b>2.0.5.</b></p><h2 id="individual-modules" class="content-subhead">Individual Modules<a href="#individual-modules" class="content-link" title="Heading anchor"></a></h2><p>You can also pull in the following modules individually.</p><div class="table-responsive"><table class="pure-table pure-table-bordered"><thead><tr><th>Name</th><th>URL</th></tr></thead><tbody><tr><td>Base</td><td>https://unpkg.com/purecss@2.0.5/build/base-min.css</td></tr><tr><td>Buttons</td><td>https://unpkg.com/purecss@2.0.5/build/buttons-min.css</td></tr><tr><td>Forms (Responsive)</td><td>https://unpkg.com/purecss@2.0.5/build/forms-min.css</td></tr><tr><td>Forms (Non-Responsive)</td><td>https://unpkg.com/purecss@2.0.5/build/forms-nr-min.css</td></tr><tr><td>Grids (Base)</td><td>https://unpkg.com/purecss@2.0.5/build/grids-min.css</td></tr><tr><td>Grids (Responsive)</td><td>https://unpkg.com/purecss@2.0.5/build/grids-responsive-min.css</td></tr><tr><td>Menus (Responsive)</td><td>https://unpkg.com/purecss@2.0.5/build/menus-min.css</td></tr><tr><td>Tables</td><td>https://unpkg.com/purecss@2.0.5/build/tables-min.css</td></tr></tbody></table></div><h2 id="combo-handling" class="content-subhead">Combo Handling<a href="#combo-handling" class="content-link" title="Heading anchor"></a></h2><p>jsDelivr is a CDN that supports combo handling. Here&#x27;s an example of a combo URL that includes the same CSS <a href="/base/">Base</a>, <a href="/grids/">Grids</a>, and <a href="/forms/">Forms</a> as above.</p><div><div class="code"><pre style="display:block;overflow-x:auto;padding:0.5em;color:#000;background:#f8f8ff"><code><span style="color:#000080;font-weight:normal">&lt;<span style="color:#000080;font-weight:normal">link</span> <span class="hljs-attr">rel</span>=<span style="color:#219161">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span style="color:#219161">&quot;//cdn.jsdelivr.net/combine/npm/purecss@2.0.5/build/base-min.css,npm/purecss@2.0.5/build/grids-min.css,npm/purecss@2.0.5/build/forms-min.css&quot;</span> /&gt;</span></code></pre></div></div><p>See the <a href="https://github.com/jsdelivr/jsdelivr#combine-multiple-files">jsDelivr combo handler documentation</a> to learn more about its features.</p><h2 id="using-pure-with-google-amp" class="content-subhead">Using Pure with Google AMP<a href="#using-pure-with-google-amp" class="content-link" title="Heading anchor"></a></h2><p>Google&#x27;s <a href="https://www.ampproject.org/">Accelerated Mobile Pages</a> (AMP) allow web pages to get pre-rendered on Google at the cost of restrictions on JS and <a href="https://www.ampproject.org/docs/guides/responsive/style_pages#disallowed-styles">CSS</a>, such as completely inlining all styles rather than using stylesheets in external files such as those hosted at the CDNs mentioned above.</p><p>Furthermore, AMP disallows some CSS functionality. In Pure, the only bit currently used disallowed by AMP is &#x27;!important&#x27;, currently used in the definition of the &#x27;.hidden&#x27; helper class. Removing this modifier should suffice to render Pure usable with AMP.</p><h2 id="contribute-on-github" class="content-subhead">Contribute on GitHub<a href="#contribute-on-github" class="content-link" title="Heading anchor"></a></h2><p>Pure is an open-source project under the BSD License. We welcome issues, pull requests, and feedback. Check out our <a href="https://github.com/pure-css/pure">repo on GitHub</a>.</p></div><div class="footer"><div class="legal pure-g"><div class="pure-u-1 u-sm-1-2"><p class="legal-license">This site is built with ❤️ using Pure v2.0.5<br>All code on this site is licensed under the <a href="https://github.com/pure-css/pure/blob/master/LICENSE">Yahoo BSD License</a> unless otherwise stated.</p></div><div class="pure-u-1 u-sm-1-2"><ul class="legal-links"><li><a href="https://github.com/pure-css/pure/">GitHub Project</a></li><li><a href="https://hackerone.com/yahoo/">Security Contact Info</a></li></ul><p class="legal-copyright">© 2014 - Present Yahoo! Inc. All rights reserved.</p></div></div></div></div></div>
</div>

<script src="/styles.59801a08.js"></script>

<script src="/runtime~main.5e4f6629.js"></script>

<script src="/main.596eb772.js"></script>

<script src="/common.71de0887.js"></script>

<script src="/94a49780.3c2eb2d8.js"></script>


</body>
</html>